<template>
  <view class="related-content">
    <view class="top-block view-block">
      <uni-section title="实时信息" type="line" titleColor=" #102C59" titleFontSize="32rpx"></uni-section>

      <view class="r-list">
        <view class="r-item" v-for="(item,index) in dataList" :key="index">
          <view class="r-left">
            <image class="icon" src="/static/images/monitor/dmhj/real-icon.png" mode=""></image>
            <text class="lab">{{item.name}}</text>
          </view>
          <view class="val" v-if="item.type != 'K0004' && item.type != 'K0001'  && item.type != 'K0008'  && item.type != 'K0006'">{{item.value}}</view>
          <view class="val" v-if="item.type == 'K0001'">{{ +item.value == 1 ? '开' : '备用' }}</view>
          <view class="val" v-if="item.type == 'K0004'" >{{ +item.value == 1 ? '有电' : '备用' }}</view>
          <view class="val" v-if="item.type == 'K0008'">{{ +item.value == 1 ? '有电' : '备用' }}</view>
          <view class="val" v-if="item.type == 'K0006'">{{ +item.value == 1 ? '有风' : '备用' }}</view>
        </view>
        
      </view>
    </view>

    <view class="view-block-line">
      <uni-section title="井下井上瓦斯浓度" type="line" titleColor=" #102C59" titleFontSize="32rpx">
        <template #right>
          <uni-data-select v-model="wsValue" :localdata="options" @change="changeSelectWS" :clear="false"></uni-data-select>
        </template>
      </uni-section>
      <view class="chart-box">
        <line-chart chart-ref="chartRefWs" :chart-data="chartDataWs" gridLeft="5%" gridRight="8%" :interval="wsInterval"></line-chart>
      </view>
    </view>

    <view class="view-block-line">
      <uni-section title="井上井下一氧化碳" type="line" titleColor=" #102C59" titleFontSize="32rpx">
        <template #right>
          <uni-data-select v-model="coValue" :localdata="options" @change="changeSelectCO" :clear="false"></uni-data-select>
        </template>
      </uni-section>
      <view class="chart-box">
        <line-chart chart-ref="chartRefCo" :chart-data="chartDataCo" gridLeft="5%" gridRight="8%" :interval="coInterval"></line-chart>
      </view>
    </view>
  </view>
</template>

<script>
import { getEngineeringProgress,getGasConsistency, getGroundCo, getUndergroundCo } from '@/api/monitorCenter/index.js';
export default {
  data() {
    return {
      dataList:[],
      options: [
        {
          value: 1,
          text: '今日'
        },
        {
          value: 2,
          text: '本周'
        },
        {
          value: 3,
          text: '本月'
        }
      ],
      wsValue: 1,
      wsInterval: 2,
      chartDataWs: {
        legendData: ['井上浓度', '井下浓度'],
        dataX: [],
        dataY: [],
        colorList: [
          {
            line: 'rgba(46, 125, 255, 1)',
            area0: 'rgba(46, 125, 255, 0.5)',
            area1: 'rgba(46, 125, 255, 0)'
          },
          {
            line: 'rgba(159, 77, 252, 1)',
            area0: 'rgba(159, 77, 252, 0.5)',
            area1: 'rgba(159, 77, 252, 0)'
          }
        ]
      },
      coValue: 1,
      coInterval: 2,
      chartDataCo: {
        legendData: ['井上浓度', '井下浓度'],
        dataX: [],
        dataY: [],
        colorList: [
          {
            line: 'rgba(4, 197, 76, 1)',
            area0: 'rgba(4, 197, 76, 0.5)',
            area1: 'rgba(4, 197, 76, 0)'
          },
          {
            line: 'rgba(252, 155, 57, 1)',
            area0: 'rgba(252, 155, 57, 0.5)',
            area1: 'rgba(252, 155, 57, 0)'
          }
        ]
      }
    };
  },
  created() {
    this.getDataList()
    this.getGas();
    this.getCo();
  },
  mounted() {},
  methods: {
    changeSelectWS(e) {
      this.getGas();
    },
    changeSelectCO(e) {
      this.getCo();
    },
    getDataList(){
      getEngineeringProgress().then(res=>{
        this.dataList = res.data || []
      })
    },
    getGas() {
      getGasConsistency(this.wsValue).then((res) => {
        let data = res.data;
        let tempX = [],
          tempY1 = [],
          tempY2 = [];
        if (data.jk) {
          data.jk.forEach((item) => {
            tempX.push(item.name);
            tempY1.push(item.value);
          });

          data.jd.forEach((item) => {
            tempY2.push(item.value);
          });
        } else {
          data.jd.forEach((item) => {
            tempX.push(item.name);
            tempY2.push(item.value);
          });
        }
        this.getChartsInterval('ws');
        this.chartDataWs.dataX = tempX;
        this.chartDataWs.dataY = [tempY1, tempY2];
      });
    },
    async getCo() {
      let tempX = [],
        tempY1 = [],
        tempY2 = [];
      const ground = await getGroundCo(this.coValue);
      if (ground.code == 200) {
        tempX = ground.data.map((item) => item.name);
        tempY1 = ground.data.map((item) => item.value);
      }
      const unground = await getUndergroundCo(this.coValue);
      if (unground.code == 200) {
        tempY2 = unground.data.map((item) => item.value);
      }
      this.getChartsInterval('co');
      this.chartDataCo.dataX = tempX;
      this.chartDataCo.dataY = [tempY1, tempY2];
    },
    getChartsInterval(type) {
      let temp = 2;
      let key = type == 'ws' ? this.wsValue : this.coValue;
      switch (key) {
        case 1:
          temp = 2;
          break;
        case 2:
          temp = 1;
          break;
        case 3:
          temp = 5;
          break;
      }
      if (type == 'ws') {
        this.wsInterval = temp;
      }
      if (type == 'co') {
        this.coInterval = temp;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.related-content {
  overflow-y: auto;
  
  .top-block {
    // box-shadow: 0rpx -15rpx 21rpx -5rpx rgba(0, 0, 0, 0.25);
    border-radius: 20rpx 20rpx 0rpx 0rpx;
  }

  .view-block {
    background: #fff;
    padding: 20rpx 30rpx;
    margin-bottom: 40rpx;
  }
  .view-block-line {
    background: #fff;
    padding: 20rpx 0;
    margin-bottom: 40rpx;

    .uni-section {
      padding: 0 30rpx;
    }
  }
  .r-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .r-item {
      width: calc(50% - 20rpx);
      height: 52rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: rgba(46, 125, 255, 0.1);
      border-radius: 5rpx 5rpx 5rpx 5rpx;
      padding: 0 10rpx;
      margin-bottom: 30rpx;

      .icon {
        width: 30rpx;
        height: 30rpx;
        vertical-align: middle;
      }

      .lab {
        padding-left: 8rpx;
        font-size: 24rpx;
        color: #102c59;
      }

      .val {
        font-weight: 500;
        font-size: 24rpx;
        color: #2e7dff;
      }
    }
  }

  .chart-box {
    width: 100%;
    height: 487rpx;
  }

  ::v-deep .uni-select {
    width: 150rpx;
    height: 42rpx;
    border-color: rgba(0, 0, 0, 0.3);

    .uni-select__input-text {
      font-size: 24rpx;
      color: rgba(0, 0, 0, 0.5);
    }
    .uni-select__input-box {
      height: 42rpx;
      line-height: 42rpx;
    }
  }
}
::v-deep .uni-section .uni-section-header {
  padding: 0 0 20rpx 0;
}
::v-deep .uni-select__selector-item {
  color: rgba(0, 0, 0, 0.5);
}
</style>
